<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" style="display: flex;justify-content: space-between;">
        <span>车辆详情</span>
        <el-button @click="pageReturn" v-if="!isEdit">返回</el-button>
      </div>
      <div class="top-card">
        <el-image src="" style="width: 120px; height: 120px"></el-image>
        <div class="top-card-right">
          <div style="font-size: 16px;display: flex;justify-content: space-between;">
            <div>
              <span style="font-weight: 600;">车架号：</span><span>{{ detailForm.vinNo }}</span>
            </div>
            <div>
              <span
                style="font-weight: 600;">车辆状态：</span><span>{{dictsName(dict.type.business_type,detailForm.businessType)}}</span>
            </div>

          </div>
          <div>
            <span>品牌/车型/车款：</span>
            <span>{{`${detailForm.brandName}${detailForm.seriesName?'/'+detailForm.seriesName:''}${detailForm.modelName?'/'+detailForm.modelName:''}` }}</span>
          </div>
          <div><span>车辆归属：</span><span>{{ detailForm.carDepotName }}</span></div>
        </div>
      </div>
    </el-card>
    <el-form :model="detailForm" v-if="isForm" ref="detailForm" label-width="158px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="保险详情" name="first">

          <el-card class="box-card">
            <div slot="header">
              <span>车辆信息</span>
            </div>
            <el-row>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">所属地：</div>
                <el-input disabled class="inp-name-r" v-model="detailForm.value"></el-input>
              </el-col>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">被保险人：</div>
                <el-input disabled class="inp-name-r" v-model="detailForm.value"></el-input>
              </el-col>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">行驶证车主：</div>
                <el-input disabled class="inp-name-r" v-model="detailForm.value"></el-input>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">租车方名称：</div>
                <el-input disabled class="inp-name-r" v-model="detailForm.value"></el-input>
              </el-col>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">车牌号：</div>
                <el-input disabled v-model="detailForm.carNo" class="inp-name-r"></el-input>
              </el-col>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">品牌：</div>
                <el-input disabled v-model="detailForm.brandName" class="inp-name-r"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">厂牌型号：</div>
                <el-input disabled class="inp-name-r" v-model="detailForm.brandName"></el-input>
              </el-col>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">座位数：</div>
                <el-input disabled v-model="detailForm.seatNumber" class="inp-name-r"></el-input>
              </el-col>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">发动机号：</div>
                <el-input disabled class="inp-name-r" v-model="detailForm.brandName"></el-input>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">排量：</div>
                <el-input disabled class="inp-name-r"></el-input>
              </el-col>

              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">车辆开票价：</div>
                <el-input disabled class="inp-name-r"></el-input>
              </el-col>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">车辆初次登记日期：</div>
                <el-input disabled class="inp-name-r"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">燃料种类：</div>
                <el-input disabled class="inp-name-r"></el-input>
              </el-col>
              <el-col :span="8" class="box-card-inp">
                <div class="inp-name">保险性质：</div>
                <el-input disabled class="inp-name-r"></el-input>
              </el-col>

            </el-row>
          </el-card>
          <el-card class="box-card">
            <div slot="header">
              <span>交强险信息</span>
            </div>
            <el-row>
              <el-col :span="8">
                <el-form-item label="租赁禀议保险公司:">
                  <el-input v-model="detailForm.jq_rentInsuranceCompany" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="我司投保供应商:">
                  <el-input v-model="detailForm.jq_insuranceSupplier" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="交强险保单号:">
                  <el-input v-model="detailForm.jq_policyCode" v-if="isEdit"></el-input>
                  <span v-else>{{detailForm.jq_policyCode}}</span>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="交强险公司:">
                  <el-input v-model="detailForm.jq_insuranceCompany" v-if="isEdit"></el-input>
                  <span v-else>{{detailForm.jq_insuranceCompany}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="交强险公司编码:">
                  <el-input v-model="detailForm.jq_insuranceCompanyCode" v-if="isEdit"></el-input>
                  <span v-else>{{detailForm.jq_insuranceCompanyCode}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="保单:">
                  <!-- <el-input v-model="manageVos[0].insuranceCompanyCode" v-if="isEdit"></el-input>
                  <span v-else>{{manageVos[0].insuranceCompanyCode}}</span> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="交强险性质:">
                  <el-select v-model="detailForm.jq_insuranceType" v-if="isEdit" style="width: 100%;">
                    <el-option label="运营" value="1">
                    </el-option>
                    <el-option label="非运营" value="2">
                    </el-option>
                  </el-select>

                  <span v-else>{{ detailForm.jq_insuranceType == '1' ? '运营' : '非运营' }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="交强险保费:">
                  <el-input v-model="detailForm.jq_insuranceAmount" v-if="isEdit"></el-input>
                  <span v-else>{{detailForm.jq_insuranceAmount}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车船税是否缴纳:">
                  <el-radio-group v-model="detailForm.jq_carTaxStatus" v-if="isEdit">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                  </el-radio-group>
                  <span v-else>{{detailForm.jq_carTaxStatus == '1' ? '是' : '否'}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="车船税:">
                  <el-input v-model="detailForm.jq_carTax" v-if="isEdit"></el-input>
                  <span v-else>{{detailForm.jq_carTax}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实际交强险开始时间:">
                  <el-date-picker v-model="detailForm.jq_actualBeginTime" type="datetime" placeholder="" v-if="isEdit"
                    value-format='yyyy-MM-dd HH:mm:ss' style="width: 100%;">
                  </el-date-picker>

                  <span v-else>{{detailForm.jq_actualBeginTime}}</span>
                </el-form-item>

              </el-col>
              <el-col :span="8">
                <el-form-item label="实际交强险结束时间:">
                  <el-date-picker v-model="detailForm.jq_actualEndTime" type="datetime" placeholder="" v-if="isEdit"
                    value-format='yyyy-MM-dd HH:mm:ss' style="width: 100%;">
                  </el-date-picker>
                  <span v-else>{{detailForm.jq_actualEndTime}}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="box-card">
            <div slot="header">
              <span>商业险信息</span>
            </div>
            <el-row>
              <el-col :span="8">
                <el-form-item label="租赁禀议保险公司:">
                  <el-input v-model="detailForm.sy_rentInsuranceCompany" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="我司投保供应商:">
                  <el-input v-model="detailForm.sy_insuranceSupplier" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商业险保单号:">
                  <el-input v-model="detailForm.sy_policyCode" v-if="isEdit"></el-input>
                  <span v-else>{{detailForm.sy_policyCode}}</span>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="商业险公司:">
                  <el-input v-model="detailForm.sy_insuranceCompany" v-if="isEdit"></el-input>
                  <span v-else>{{detailForm.sy_insuranceCompany}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商业险公司编码:">
                  <el-input v-model="detailForm.sy_insuranceCompanyCode" v-if="isEdit"></el-input>
                  <span v-else>{{detailForm.sy_insuranceCompanyCode}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="保单:">
                  <!-- <el-input v-model="manageVos[0].insuranceCompanyCode" v-if="isEdit"></el-input>
                  <span v-else>{{manageVos[0].insuranceCompanyCode}}</span> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="商业险性质:">
                  <el-select v-model="detailForm.sy_insuranceType" v-if="isEdit" style="width: 100%;">
                    <el-option label="运营" value="1">
                    </el-option>
                    <el-option label="非运营" value="2">
                    </el-option>
                  </el-select>

                  <span v-else>{{ detailForm.sy_insuranceType == '1' ? '运营' : '非运营' }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="商业险保费:">
                  <el-input v-model="detailForm.sy_insuranceAmount" v-if="isEdit"></el-input>
                  <span v-else>{{detailForm.sy_insuranceAmount}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实际商业险开始时间:">
                  <el-date-picker v-model="detailForm.sy_actualBeginTime" type="datetime" placeholder="" v-if="isEdit"
                    value-format='yyyy-MM-dd HH:mm:ss' style="width: 100%;">
                  </el-date-picker>

                  <span v-else>{{detailForm.sy_actualBeginTime}}</span>
                </el-form-item>

              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="实际商业险险结束时间:">
                  <el-date-picker v-model="detailForm.sy_actualEndTime" type="datetime" placeholder="" v-if="isEdit"
                    value-format='yyyy-MM-dd HH:mm:ss' style="width: 100%;">
                  </el-date-picker>
                  <span v-else>{{detailForm.sy_actualEndTime}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <p>保险套餐:</p>
                <el-table :data="detailForm.sy_businessVoList" border size='mini'>
                  <el-table-column v-for=" i,k in insureCol" :label="i.label" align="center" :prop="i.prop"
                    :key="k"></el-table-column>
                </el-table>

              </el-col>
            </el-row>
          </el-card>

          <el-card class="box-card">
            <div slot="header">
              <span>其他保险</span>

            </div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="其他保险备注:">
                  <el-input v-model="detailForm.otherInsuranceRemark" v-if="isEdit"></el-input>
                  <span v-else>{{detailForm.otherInsuranceRemark}}</span>
                </el-form-item>

              </el-col>
              <el-col :span="12">
                <el-form-item label="其他保险保费合计:">
                  <el-input v-model="detailForm.otherInsuranceSumAmount" v-if="isEdit"></el-input>
                  <span v-else>{{detailForm.otherInsuranceSumAmount}}</span>
                </el-form-item>
              </el-col>
            </el-row>

          </el-card>
          <el-card class="box-card">
            <div slot="header">
              <span>付款信息</span>

            </div>
            <el-row>
              <el-col :span="8" class="box-card-inp">
                <el-form-item label="付款时间:">
                  <el-date-picker type="datetime" v-if="isEdit" value-format='yyyy-MM-dd HH:mm:ss' style="width: 100%;">
                  </el-date-picker>
                  <span v-else></span>
                </el-form-item>
              </el-col>

            </el-row>
          </el-card>

        </el-tab-pane>
        <el-tab-pane label="保险记录" name="second" v-if="!isEdit">
          <el-card>
            <div slot="header">
              <el-row>
                <el-col :span="8" class="box-card-inp">
                  <div class="inp-name">车辆交强险总次数：</div>
                  <div></div>
                </el-col>
                <el-col :span="8" class="box-card-inp">
                  <div class="inp-name">车辆交强险总金额：</div>
                  <div></div>
                </el-col>

              </el-row>

            </div>
            <el-table v-loading="false" :data="historyList" border>
              <el-table-column label="操作" align="center" width="80">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" v-hasPermi="['demo:demo:remove']">查看</el-button>

                </template>
              </el-table-column>
              <el-table-column v-for=" i,k in historyCol" :label="i.label" align="center" :prop="i.prop"
                :width="i.width" :key="k"></el-table-column>

            </el-table>
          </el-card>

          <el-card>
            <div slot="header">
              <el-row>
                <el-col :span="8" class="box-card-inp">
                  <div class="inp-name">车辆商业险总次数：</div>
                  <div></div>
                </el-col>
                <el-col :span="8" class="box-card-inp">
                  <div class="inp-name">车辆商业险总金额：</div>
                  <div></div>
                </el-col>

              </el-row>

            </div>
            <el-table v-loading="false" :data="historyList" border>
              <el-table-column label="操作" align="center" width="80">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" v-hasPermi="['demo:demo:remove']">查看</el-button>

                </template>
              </el-table-column>
              <el-table-column v-for=" i,k in historyCol" :label="i.label" align="center" :prop="i.prop"
                :width="i.width" :key="k"></el-table-column>

            </el-table>
          </el-card>
        </el-tab-pane>
      </el-tabs>

      <el-row v-if="isEdit">
        <el-col style='text-align: center;'><el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-col>
      </el-row>

    </el-form>
  </div>
</template>

<script>
  import {
    getInsuranceDetails,
    updateInsurance
  } from "@/api/bxgl/insureManageApi.js";
  import {
    getToken
  } from "@/utils/auth";



  export default {
    dicts: ['business_type'],
    name: "InsureManageDetails",
    components: {},
    computed: {

    },
    data() {
      return {
        manageVos: [],
        isForm: false,
        isEdit: false,
        routeQuery: {},
        activeName: 'first',
        insureDetailList: [{
            insuranceType: "强盗险",
            coverage: "50",
            InsuranceCosts: "40"
          },
          {
            insuranceType: "车辆损失险",
            coverage: "100",
            InsuranceCosts: "100"
          },

          {
            insuranceType: "第三者责任险",
            coverage: "60",
            InsuranceCosts: "60"
          },

          {
            insuranceType: "乘客险保额",
            coverage: "60",
            InsuranceCosts: "60"
          },

          {
            insuranceType: "司机险保额",
            coverage: "60",
            InsuranceCosts: "60"
          },

          {
            insuranceType: "划痕险",
            coverage: "60",
            InsuranceCosts: "60"
          },

          {
            insuranceType: "其他险种",
            coverage: "60",
            InsuranceCosts: "60"
          },
        ],
        insureCol: [{
            prop: "businessName",
            label: "商业险种",
          },
          {
            prop: "insurancePrice",
            label: "保额/万元",
          },
          {
            prop: "insuranceQuota",
            label: "保险费用/元",

          },

        ],
        historyList: [],
        historyCol: [{
            prop: "carNo",
            label: "交强险保险公司",
          },
          {
            prop: "vinNo",
            label: "交强险保单号",
          },
          {
            prop: "brandName",
            label: "交强险开始时间",

          },

          {
            prop: "modelName",
            label: "交强险结束时间",

          },
          {
            prop: "seriesName",
            label: "交强险费用",
          },
          {

            label: "备注",
            prop: "businessType",
          },
          {
            prop: "seriesName",
            label: "保单时效",
          },
          {

            label: "记录时间",
            prop: "businessType",
          },


        ],

        dataList: [],

        // 表单参数
        detailForm: {

        },
        // 交强险1
        compulsoryForm: {},
        // 商业险2
        commercialForm: {},
      };
    },
    watch: {
      '$route': {
        handler(val, oldVal) {

          if (val.query) {

            // if (val.query.type == '2') {
            //   this.isEdit = true
            // } else {
            //   this.isEdit = false
            // }
          }
        },
        // 深度观察监听
        deep: true,

      }

    },
    computed: {
      dictsName() {
        return (arr, type) => {
          let name = ""
          arr.map((v) => {
            if (type == v.value) {
              name = v.label
            }
          })
          return name
        }
      },
      rowManage() {
        return (arr, type) => {
          let obj = {}
          let arri = []
          arri = arr.filter((v) => {
            return v.type == type
          })
          return obj = arri[0] || {}
        }
      },
    },
    created() {

      this.routeQuery = this.$route.query

      if (this.routeQuery.type == '2') {
        this.isEdit = true
      } else {
        this.isEdit = false
      }

      // this.getBrandNames()
      this.insuranceDetails();
    },
    mounted() {

    },
    methods: {

      onSubmit() {
        const loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        for (let k in this.detailForm) {
          if (k.indexOf('jq_') != -1) {
            this.compulsoryForm[k.split("_")[1]] = this.detailForm[k]
          }
          if (k.indexOf('sy_') != -1) {
            this.commercialForm[k.split("_")[1]] = this.detailForm[k]
          }
        }

        if (this.detailForm.manageVos && this.detailForm.manageVos.length > 0) {
          this.detailForm.manageVos.forEach((v, i) => {
            if (v.type == this.compulsoryForm.type) {
              this.detailForm.manageVos[i] = this.compulsoryForm
            }
            if (v.type == this.commercialForm.type) {
              this.detailForm.manageVos[i] = this.commercialForm
            }
          })

        }
        updateInsurance(this.detailForm).then((res) => {
          if (res.code == '200') {
            this.$message({
              message: '保存成功',
              type: 'success'
            });

            setTimeout(() => {
              const obj = {
                path: "/bxgl/insureManageList"
              };
              this.$tab.closeOpenPage(obj);
            }, 300)


          } else {
             this.$message.error('保存失败');
            // loading.close();
          }

        })
        console.log(this.detailForm, "2222");

        loading.close();
      },
      pageReturn() {
        this.$router.push({
          path: "/bxgl/insureManageList",
        })
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      insuranceDetails() {
        getInsuranceDetails(this.routeQuery.id).then((res) => {

          if (res.code == "200") {
            this.isForm = true
            this.detailForm = res.data || {}

            this.manageVos = res.data.manageVos
            // 处理保险类型回显表单jq交强险 sy商业险
            if (res.data.manageVos && res.data.manageVos.length > 0) {
              res.data.manageVos.forEach((v) => {
                if (v.type == 1) {
                  for (let key in v) {
                    // this.detailForm[`jq_${key}`] = v[key]
                    this.$set(this.detailForm, `jq_${key}`, v[key]);
                  }
                } else if (v.type == 2) {
                  for (let key in v) {
                    this.$set(this.detailForm, `sy_${key}`, v[key]);
                    // this.detailForm[`sy_${key}`] = v[key]
                  }
                }
              })
            }

          }
        })
      },
    }
  };
</script>


<style lang="scss" scoped>
  .box-card {
    font-size: 14px;
    margin-bottom: 20px;

    .box-card-inp {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .inp-name {
        width: 130px;
        text-align: right;
        font-size: 14px;
      }

      .inp-name-r {
        flex: 1;
      }
    }

    .top-card {
      display: flex;

      .top-card-right {
        flex: 1;
        font-size: 14px;
        line-height: 36px;
        margin-left: 20px;
      }
    }
  }

  // .form-dialog {
  //   ::v-deep .el-dialog__header {
  //     padding: 10px 20px;
  //     border-bottom: 1px solid #DCDFE6;

  //     .el-dialog__headerbtn {
  //       top: 15px;
  //     }
  //   }

  // .box-card {
  //   margin-bottom: 20px;

  //   .card-title {
  //     font-size: 16px;
  //     position: relative;
  //     margin-left: 8px;
  //     padding: 0;
  //   }

  //   .card-title::after {
  //     content: '';
  //     width: 4px;
  //     height: 18px;
  //     background-color: aqua;
  //     display: block;
  //     position: absolute;
  //     left: -12px;
  //     top: 2px;
  //   }
  // }

  // }
</style>
